<template>
  <view>
    <m-top :autoBack="true" :bgChangeByScroll="true" bgColor="#8C82FF" @getHeight="getGlHeight"> 个人信息 </m-top>

    <m-container :top="glTop">
      <view class="pdv40 mgt20">
        <view class="card-avatar">
          <u-upload name="6" :maxCount="1" accept="image" @afterRead="afterReadFile">
            <view class="card-avatar__wrapper">
              <view class="tips cfff font24">点击修改</view>
              <image class="img" :src="getImgUrl(state.tmb_icon) || require('@/static/icon/avatar.png')"></image>
            </view>
          </u-upload>
        </view>

        <!--  -->
        <view class="mgt40">
          <m-card :padding="false">
            <view class="cell-group">
              <view class="cell-item flex align-center">
                <view class="font32 c666">姓名</view>
                <view class="mglauto">
                  <u-input
                    fontSize="32rpx"
                    color="#333333"
                    :border="'none'"
                    v-model="state.tmb_name"
                    inputAlign="right"
                    :customStyle="{
                      'background-color': 'transparent',
                    }"
                  >
                  </u-input>
                </view>
              </view>

              <view class="cell-item flex align-center">
                <view class="font32 c666">性别</view>
                <view class="font32 c333 mglauto flex align-center">
                  <view class="cell-check flex align-center" @click="state.tmb_sex = 0">
                    <view
                      class="radio"
                      :class="{
                        active: state.tmb_sex == 0,
                      }"
                    ></view>
                    <view class="label">女</view>
                  </view>
                  <view class="cell-check flex align-center" @click="state.tmb_sex = 1">
                    <view
                      class="radio"
                      :class="{
                        active: state.tmb_sex == 1,
                      }"
                    ></view>
                    <view class="label">男</view>
                  </view>
                </view>
              </view>
            </view>
          </m-card>
        </view>

        <!--  -->
        <view class="mgt40">
          <m-card :padding="false">
            <view class="cell-group">
              <view class="cell-item flex align-center">
                <view class="font32 c666">单位名称</view>
                <!-- <view class="mglauto">
                  <u-icon name="arrow-right" size="24rpx" color="#666666"></u-icon>
                </view> -->
              </view>

              <view class="cell-item flex align-center">
                <u-input
                  fontSize="32rpx"
                  color="#333333"
                  :border="'none'"
                  v-model="state.tmb_company_name"
                  placeholder="请输入"
                  inputAlign="left"
                  :customStyle="{
                    'background-color': 'transparent',
                  }"
                >
                </u-input>
              </view>

              <view class="cell-item flex align-center">
                <view class="font32 c666">职务名称</view>
                <!-- <view class="mglauto">
                  <u-icon name="arrow-right" size="24rpx" color="#666666"></u-icon>
                </view> -->
              </view>

              <view class="cell-item flex align-center">
                <u-input
                  fontSize="32rpx"
                  color="#333333"
                  :border="'none'"
                  v-model="state.tmb_position"
                  placeholder="请输入"
                  inputAlign="left"
                  :customStyle="{
                    'background-color': 'transparent',
                  }"
                >
                </u-input>
              </view>

              <view class="cell-item flex align-center" @click="show = true">
                <view class="font32 c666">修改手机号</view>
                <view class="mglauto">
                  <u-icon name="arrow-right" size="24rpx" color="#666666"></u-icon>
                </view>
              </view>

              <view class="cell-item flex align-center" @click="show = true">
                <view class="font32 c333">{{ phone }}</view>
              </view>

              <view class="cell-item flex align-center" @click="toRealAuthHandler">
                <view class="font32 c666">实名认证</view>
                <view class="mglauto">
                  <u-icon name="arrow-right" size="24rpx" color="#666666"></u-icon>
                </view>
              </view>

              <view class="cell-item flex align-center" @click="toRealAuthHandler">
                <view class="font32 c333">{{ state.tmb_id_card || '未认证' }}</view>
              </view>
            </view>
          </m-card>
        </view>

        <view class="mgt40">
          <u-button
            type="primary"
            color="#481EC1"
            text="保存"
            @click="submit"
            :customStyle="{
              height: '84rpx',
              'border-radius': '20rpx',
              'box-shadow': ' 0rpx 2rpx 12rpx 0rpx rgba(27,166,131,0.0988)',
              'font-size': '32rpx',
            }"
          ></u-button>
        </view>
      </view>
    </m-container>

    <m-dialog v-model="show" title="修改手机号" @cancel="show = false" @confirm="show = false">
      <text>如您需要修改手机号，请联系您的管理上级或者您的负责人</text>
    </m-dialog>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import { updateUserInfoApi, uploadFile } from "@/api/modules/base.js";
import UserInfoMixin from "@/mixins/modules/user.js";
import Schema from "async-validator";

export default {
  mixins: [GlTopMixin, UserInfoMixin],
  components: {},
  data() {
    return {
      show: false,
      state: {
        tmb_name: "",
        tmb_sex: "",
        tmb_icon: "",
        tmb_company_name: "",
        tmb_position: "",
        tmb_id_card: "",
      },
      fileList: [],
      descriptor: {
        tmb_name: {
          type: "string",
          required: true,
          message: "名称必填",
        },
        // phone: [
        //   {
        //     type: "string",
        //     required: true,
        //   },
        //   {
        //     validator: (rule, value, callback) => {
        //       console.log(value);
        //       return this.$u.test.mobile(value);
        //     },
        //     message: "手机号不正确",
        //   },
        // ],
      },
    };
  },

  computed: {
    phone() {
      const phoneNumber = this.userInfo.tmb_phone;
      if (phoneNumber.length !== 11) {
        return phoneNumber;
      }
      var maskedNumber = phoneNumber.substring(0, 3) + "****" + phoneNumber.substring(7);
      return maskedNumber;
    },
  },

  watch: {
    "userInfo.tmb_id": {
      immediate: true,
      handler(value) {
        if (!value) return;
        Object.assign(this.state, this.userInfo);
      },
    },
  },

  methods: {
    async afterReadFile(e) {
      const file = e.file;
      const response = await uploadFile(file.url);
      this.state.tmb_icon = response;
      this.$u.toast("上传成功，点击保存进行更新");
      // this.fileList.push({
      //   status: "success",
      //   message: "上传成功",
      //   url: this.getImgUrl(response),
      // });
    },
    toRealAuthHandler() {
      this.$u.route('/pages-mine/auth/index')
    },
    submit() {
      const validator = new Schema(this.descriptor);
      validator.validate(this.state, async (errors, fields) => {
        if (errors) {
          const { message } = errors[0];
          return uni.$u.toast(message);
        }
        uni.showLoading({
          title: "加载中",
        });
        await updateUserInfoApi(this.state).finally(uni.hideLoading);
        this.$u.toast("更新成功");
        // 更新下store库
        this.$store.dispatch("getMemberInfo");
        await this.$u.sleep(2000);
        uni.navigateBack();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .u-upload__wrap {
  justify-content: center;
}

.card-avatar {
  position: relative;
  &__wrapper {
    position: relative;
    border: 4rpx solid #ffffff;
    border-radius: 50%;
    overflow: hidden;
    width: 220rpx;
    height: 220rpx;

    .tips {
      position: absolute;
      bottom: 16rpx;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.4);
      padding: 10rpx 8rpx;
      border-radius: 8rpx;
      z-index: 1;
      line-height: 1;
      white-space: nowrap;
    }

    .img {
      width: 100%;
      height: 100%;
    }
  }
}

.cell-group {
  padding: 0 32rpx;

  .cell-item {
    padding: 40rpx 0;

    .cell-check {
      &:not(:first-child) {
        margin-left: 58rpx;
      }

      .label {
        margin-left: 8rpx;
      }

      .radio {
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        border-radius: 12rpx;
        border: 2rpx solid #dedede;
      }

      .active {
        border-color: transparent;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          width: 8rpx;
          height: 8rpx;
          border: 8rpx solid #5347ff;
        }
      }
    }
  }
}
</style>
